<template>
	<view class="index-list">
		<view  class="index-list-item" v-for="(item, index) in topList" :key="index">
			<view @tap="topDetail(item)" class="index-list-img">
				<image :src="item.coverImgUrl"></image>
				<text>{{item.updateFrequency}}</text>
			</view>
			<view >
				<view  class="index-list-text" v-for="(song, index) in item.tracks" :key="index">
					<text @tap="playThis(song)">{{index+1}}.{{song.first}}-{{ song.second }}</text>
					
				</view>
				
			</view> 
		</view>
	</view>
		
					
</template>

<script>
	import db from "../../../common/music-api.js"
	export default {
		data() {
			return {
				songId: ''
			}
		},
		props: {
			topList: {
				type: Array,
				default: []
			}
		},
		methods: {
			topDetail(item) {
				this.$emit('topDetail', item.id)
				
			},
			//后台搜索数据
			//{first: "假面舞会",second: "很美味" }
			async searchSong(item) {
				const that = this
				const oldId = this.songId
				const result = await db.searchKeyWord(item.first)
				if(result.data.code == 200) {
					
					//搜索结果列表
					console.log(result.data.result.songs)
					result.data.result.songs.some(song => {
						console.log(song.artists[0].name)
						console.log(song.name == item.first && song.artists[0].name == item.second)
						if(song.name == item.first && song.artists[0].name == item.second) {
							console.log(song)
							that.songId = song.id
							return true
						}
					})
				}
				console.log(this.songId)
				if(oldId !=this.songId) {
					return this.songId
				}else {
					return result.data.result.songs[0].id
				}
				
				
			},
			//
			async playThis(item) {
				const songId = await this.searchSong(item)
				console.log(songId)
				uni.navigateTo({
					url:'../songdetail/songdetail?songId='+songId
				})
			}
			
		}
	}
</script>

<style scoped>
	.index-list-item {
		display: flex;
		margin-bottom: 34rpx;
		width: 100%;
		height: 212rpx;
	}
	.index-list-img{
		position: relative;
		width: 212rpx;
		height: 212rpx;
		
	}
	.index-list-img image {
		border-radius: 10rpx;
		width: 212rpx;
		height: 212rpx;
	}
	.index-list-img text {
		position: absolute;
		left: 12rpx;
		bottom: 16rpx;
		color: white;
		font-size: 20rpx;
	}
	.index-list-text {
		margin-left: 20rpx;
		height: 70rpx;
		font-size: 24rpx;
		color: rgba(0,0,0,.7);
	
		
	}
	.index-list-text text {
		line-height: 70rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

</style>
